<template>
  <t-table :data="props.data" :columns="COLUMNS" row-key="scene">
    <template #index="{ rowIndex }">
      <span :class="getRankClass(rowIndex)">
        {{ rowIndex + 1 }}
      </span>
    </template>
    <template #toplink="{ row }">
      <a class="t-button-link" target="_blank" :href="row.toplink">{{ row.toplink }}</a>
    </template>
    <template #rslink="{ row }">
      <a class="t-button-link" target="_blank" :href="row.rslink">{{ row.rslink }}</a>
    </template>
    <template #op="slotProps">
      <t-button theme="default" variant="dashed" @click="test(slotProps)">开始测试</t-button>
    </template>
  </t-table>

  <t-drawer v-model:visible="visible" size="medium" :footer="null">
    <t-space direction="vertical" style="width: 100%">
      <request-form :cashier-url="url"></request-form>
    </t-space>
  </t-drawer>
</template>

<script setup lang="ts">
import { ref, defineProps } from 'vue';
import { COLUMNS } from '../constants';
import RequestForm from './RequestForm.vue';
import { useSettingStore } from '@/store';

const settingStore = useSettingStore();
const props = defineProps({
  data: {
    type: Array<object>,
    default: () => {
      return [];
    },
  },
});
const visible = ref(false);
const getRankClass = (index: number) => {
  return ['dashboard-rank', { 'dashboard-rank__top': index < 3 }];
};
const url = ref('');
const test = (obj: any) => {
  console.log('start test');
  visible.value = true;
  url.value = settingStore.cashierUrl;
  console.log('settingStore.cashierUrl', url.value);
};
</script>

<style lang="less" scoped>
.dashboard-rank-card {
  padding: 8px;

  :deep(.t-card__header) {
    padding-bottom: 24px;
  }

  :deep(.t-card__title) {
    font-size: 20px;
    font-weight: 500;
  }
}

.dashboard-rank__cell {
  display: inline-flex;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: white;
  font-size: 14px;
  background-color: var(--td-gray-color-5);
  align-items: center;
  justify-content: center;
  font-weight: 700;

  &--top {
    background: var(--td-brand-color);
  }
}
</style>
